<template>
    <div class="fillcontain">
        <div class="articleContainer">
            <el-form
                :inline="true"
                :model='articleData'
                ref="articleData"
                :rules="rules"
                class="demo-form-inline">
              <div class="form-content">
                 <el-row>
                     <el-form-item  label="场馆名称:" prop="name">
                         <el-input type="text" class="area" clearable :rows="1" autosize placeholder="请输入场馆名称" v-model="articleData.name">
                         </el-input>
                     </el-form-item>

                </el-row>
                  <el-row>
                  <el-form-item  label="场馆地址:" prop="address">
                      <el-input type="text" style="width: 330px;" class="area" clearable :rows="1" autosize placeholder="请输入场馆地址" v-model="articleData.address">
                      </el-input>
                  </el-form-item>
                  </el-row>
                <div class="form-tinymce-container">
                    <div class="publish-container">
                        <el-button type="primary" class="publish"  @click='cancel()'>取消</el-button>
                        <el-button type="primary" class="publish"  @click='publishArticle("articleData")'>确定</el-button>
                    </div>
                </div>

             </div>


            </el-form>
        </div>
    </div>


</template>

<script>
    import Tinymce from 'cps/Tinymce';
    import dtime from 'time-formater'
    import {axios} from 'utils/'
    import * as mUtils from '@/utils/mUtils'
    export default {
        components: { Tinymce },
        data(){
            return {
                content: 'Tinymce',
                articleData:{
                    name:'',
                    address:''
                },

                tokenAccess:'',
                rules: {
                    name: [{ required: true,message: '场馆名称为必填项~',trigger : 'blur' }],
                    address: [{ required: true,message: '场馆地址为必填项~' ,trigger : 'blur'}],
                },
                //详情弹框信息
                dialog: {
                    width:'400px',
                    show : false,
                    title: '修改信息',
                    formLabelWidth:'120px'
                }

            }
        },
        created() {
            this.tokenAccess =  mUtils.getStore('tokenAccess');
	    },
        methods: {
            //发布文章
            publishArticle(articleData){
                this.$refs[articleData].validate((valid) => {
                    if (valid) {//表单数据验证完成之后，提交数据;

                        let formData = this.articleData;
                        let data = {};
                        for(var i in formData){
                            data.name = formData['name']
                            data.address = formData['address']
                        }
                        let userString = '';
                        for (let index in formData){
                            userString += index+"="+formData[index]+'&'
                        }

                        this.addStadium(userString)
                    }
                })
            },
            addStadium(data){
                 axios({
                    type:'post',
                    path:'http://59.110.70.252:8031/stadiums',
                    data:data,
                    fn:res=>{
                        //console.log(res);
                         if(res.success == true){
                            this.$message({title:'新增成功',type:'success'});
                            //实现菜单跳转，重定向
                            this.$router.push({path: '/modifyFundArticle'});
                         }else{
                            this.$message.error('新增失败请重试')
                         }
                    },
                    errFn:(err)=>{
                        this.$message.error('新增失败请重试,'+err)
                    },
                     headers:{
                         'x-access-token':this.tokenAccess,
                         'Content-Type': 'application/x-www-form-urlencoded'
                     }
                })
            },
            randomFrom(lowerValue,upperValue)
            {
                return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
            },
            cancel(){
                this.articleData.name = '';
                this.articleData.address = '';
            }

        }

    }
</script>



<style lang="less" scoped>
    .publish-container{
        height: 50px;
        line-height: 50px;
        background-color: #38A884;
        border-color: #4db3ff;
        color: #fff;
        text-align: center;
        padding: 0 10px;
        margin-bottom:10px;
    }
    .articleContainer{
        width:600px;
        padding-left: 5px; padding-right: 5px;
        border: 1px solid #dfdfdf;
        height: 100%;
        font-size: 14px;
        padding: 10px;
    }
    .title-container{
         margin-bottom:20px;
        .article-textarea{
            min-width:400px;
        }
    }
    .area{
        padding:10px 10px;
    }
    .condition-container{
        .item{
            float:left;
        }
    }
   .form-tinymce-container{
       margin-top:200px;

   }

</style>


